import React, { Component } from 'react';
import { SvgXml } from 'react-native-svg';
import { View, StyleSheet } from "react-native";

const icon_m = `
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
  <mask id="mask0_14651_25200" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="12px" y="12px" width="136" height="136">
    <path d="M147.965 12.8711H12V147.11H147.965V12.8711Z" fill="white"/>
  </mask>
  <g mask="url(#mask0_14651_25200)">
    <path d="M147.512 117.435C147.39 117.191 147.216 116.982 147.024 116.807C146.536 116.372 145.925 116.145 145.28 116.145C145.001 116.092 144.705 116.092 144.426 116.145L108.456 133.511C108.002 133.668 107.514 133.755 107.026 133.772C106.206 133.772 105.422 133.511 104.742 133.058L95.8143 126.676C95.5879 126.502 95.3087 126.397 95.0123 126.414C94.6463 126.397 94.2803 126.536 94.0011 126.798C93.7395 127.06 93.5827 127.426 93.5827 127.792C93.5479 127.984 93.5479 128.176 93.5827 128.367L101.22 145.106V145.507C101.725 146.396 102.65 146.936 103.678 146.936C104.114 146.954 104.55 146.85 104.934 146.623H105.248L146.884 120.783C147.564 120.294 147.948 119.51 147.948 118.69C147.93 118.237 147.791 117.801 147.512 117.435Z" fill="#FFC300"/>
  </g>
  
  <mask id="mask1_14651_25200" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="12vp" y="12vp" width="136" height="136">
    <path d="M147.965 12.8711H12V147.11H147.965V12.8711Z" fill="white"/>
  </mask>
  <g mask="url(#mask1_14651_25200)">
    <path d="M70.6543 69.7655C70.6543 74.9091 74.8387 79.0939 79.9823 79.0939C85.1259 79.0939 89.3107 74.9091 89.3107 69.7655C89.3107 64.6219 85.1259 60.4375 79.9823 60.4375C74.8387 60.4375 70.6543 64.6219 70.6543 69.7655Z" fill="#07C160"/>
  </g>
  
  <mask id="mask2_14651_25200" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="12" y="12" width="136" height="136">
    <path d="M147.965 12.8711H12V147.11H147.965V12.8711Z" fill="white"/>
  </mask>
  <g mask="url(#mask2_14651_25200)">
  <path d="M146.901 74.1401C147.79 72.9545 148.122 71.4377 147.808 69.9905C147.494 68.5433 146.587 67.2881 145.297 66.5557L126.815 55.2221C126.641 55.0653 126.518 54.8737 126.466 54.6469L126.1 33.0961C126.083 31.5966 125.403 30.1669 124.269 29.1904C123.118 28.214 121.619 27.7607 120.12 27.9699L98.8652 31.3699C98.6212 31.3351 98.3944 31.2653 98.2028 31.1433L83.9228 14.8581C82.9288 13.6899 81.4816 13.0273 79.9472 13.0273C78.4128 13.0273 76.9656 13.6899 75.972 14.8581L62.0928 31.1084C61.9012 31.2479 61.6744 31.3525 61.4304 31.3699L39.775 27.9525C38.2755 27.7433 36.776 28.1966 35.6252 29.173C34.4744 30.1494 33.8119 31.5791 33.7944 33.0786L33.4457 54.5945C33.3934 54.8213 33.2888 55.0481 33.1319 55.2221L14.615 66.5557C13.2724 67.3229 12.3483 68.6305 12.0868 70.1301C11.8252 71.6293 12.2262 73.1813 13.2201 74.3493L26.6109 91.0881C26.6806 91.3145 26.6806 91.5413 26.6109 91.7505L19.898 111.958C19.3924 113.406 19.5319 114.992 20.2991 116.318C21.0662 117.643 22.374 118.567 23.8734 118.846L44.9884 122.961C45.2148 123.048 45.4244 123.205 45.5636 123.414L53.1484 143.552C53.6888 144.982 54.822 146.098 56.252 146.621C57.6816 147.144 59.2684 147.022 60.6108 146.272L79.4416 135.828C79.6684 135.758 79.8948 135.758 80.1044 135.828L92.6408 142.472L87.34 130.737C86.172 128.226 86.3812 125.297 87.8808 122.978C89.38 120.659 91.9432 119.247 94.7156 119.264C96.4244 119.264 98.0808 119.805 99.4408 120.834L107.025 126.238L139.613 110.703L132.97 91.4193C132.918 91.1925 132.918 90.9657 132.97 90.7565L146.901 74.1401ZM100.556 106.414L85.9104 85.4385L85.6836 85.1773H85.3348C83.6264 85.8049 81.8128 86.1361 79.982 86.1537C78.1512 86.1361 76.338 85.8049 74.6292 85.1773H74.2808L74.054 85.4385L59.3728 106.414L53.532 102.264L68.0384 81.5505L68.2652 81.2365L68.0036 80.9229C65.1268 77.9065 63.54 73.8961 63.54 69.7117C63.54 63.8181 66.6784 58.3957 71.77 55.4489C76.8612 52.5021 83.138 52.5021 88.2468 55.4489C93.338 58.3957 96.4764 63.8357 96.4764 69.7117C96.4764 73.8785 94.89 77.8889 92.0128 80.9229L91.7512 81.2365L91.978 81.5505L106.485 102.264L100.556 106.414Z" fill="#07C160"/>
  </g>
</svg>`

export default class Issue236 extends Component {
  render() {
    return (
      <View style={styles.bg}>
        <SvgXml
          xml={icon_m}
          width={30}
          height={30}
          style={{ margin: 20, borderColor: 'red', borderWidth: 2 }}
        />
        <SvgXml
          xml={`<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_14651_25255" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="16" width="128" height="128"><rect x="16" y="16" width="128" height="128" fill="white"/></mask><g mask="url(#mask0_14651_25255)"><path d="M65.7937 60C67.0152 60 68.1794 60.5187 68.9963 61.4269L80 73.6597L91.0071 61.4231C91.8218 60.5173 92.9829 60 94.2012 60C97.9444 60 99.8972 64.4539 97.3611 67.207L89.8164 75.3975H94.1696C96.5082 75.3975 98.404 77.2933 98.404 79.6319C98.404 81.9705 96.5082 83.8663 94.1696 83.8663H85.2354V88.9329H94.1562C96.4948 88.9329 98.3907 90.8287 98.3907 93.1673C98.3907 95.5059 96.4948 97.4017 94.1562 97.4017H85.2354V102.765C85.2354 105.656 82.8914 108 80 108C77.1086 108 74.7646 105.656 74.7646 102.765V97.4017H65.7369C63.3983 97.4017 61.5025 95.5059 61.5025 93.1673C61.5025 90.8287 63.3983 88.9329 65.7369 88.9329H74.8447V83.8663H65.8438C63.5052 83.8663 61.6093 81.9705 61.6093 79.6319C61.6093 77.2933 63.5052 75.3975 65.8438 75.3975H70.1169L62.6185 67.2189C60.0853 64.456 62.0453 60 65.7937 60Z" fill="#FF3A3A"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M76.7581 23.6684C79.4105 21.894 82.9315 21.9264 85.5592 23.8481C97.1012 32.2888 110.751 37.3765 125.002 38.5497L126.837 38.7008C130.856 39.0316 134 42.3807 134 46.4705V91.5168C134 96.4699 132.197 101.19 129.727 105.386C127.24 109.612 123.864 113.669 120.191 117.41C112.849 124.887 103.755 131.666 96.4805 136.598C86.3414 143.473 73.1772 143.45 63.0674 136.521C55.8632 131.583 46.8762 124.809 39.6251 117.342C35.9972 113.606 32.6645 109.555 30.2107 105.337C27.7734 101.148 26 96.4456 26 91.5168V46.684C26 42.4906 29.1991 39.0534 33.3073 38.6677L35.1834 38.4915C49.9968 37.1007 64.3745 31.9524 76.7581 23.6684ZM80.9267 35.2646C67.9649 43.3959 53.2274 48.5732 38 50.2653V91.5168C38 93.5888 38.7674 96.1824 40.5828 99.3026C42.3818 102.395 45.014 105.666 48.2342 108.982C54.6796 115.62 62.9223 121.873 69.8517 126.622C75.8856 130.758 83.6861 130.775 89.746 126.666C96.7472 121.919 105.096 115.656 111.629 109.003C114.893 105.678 117.562 102.399 119.385 99.2998C121.227 96.1713 122 93.5792 122 91.5168V50.3202C107.271 48.7717 93.1591 43.5964 80.9267 35.2646Z" fill="#333333"/></svg>`}
          width={30}
          height={30}
          style={{ marginLeft: 20 }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bg: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffffff",
  }
});